<template>
  <div class="app-container">
    <user-header />
    <!--表格渲染-->
    <el-table
      :data="dataSource"
      size="small"
      border
      class="table-container"
      v-loading="loading"
    >
      <el-table-column type="index" width="50px" align="center" label="序号">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realName"
        label="姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="role.name"
        label="角色"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="250px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-popover :ref="scope.row.id" placement="top" width="180">
            <p>确定该操作吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="$refs[scope.row.id].doClose()"
                >取消</el-button
              >
              <el-button
                :loading="delLoading"
                type="primary"
                size="mini"
                @click="subDelete(scope.row.id)"
                >确定</el-button
              >
            </div>
            <!-- <template v-if="isAuth"> -->
            <el-button
              slot="reference"
              type="danger"
              size="mini"
              v-if="scope.row.useStatus === 'ENABLED'"
              >停用</el-button
            >
            <el-button slot="reference" type="success" size="mini" v-else
              >启用</el-button
            >
            <!-- </template> -->
          </el-popover>

          <el-button
            size="mini"
            type="primary"
            @click="resetPasswordDailog(scope.row.id)"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      background
      :total="total"
      :current-page="currentPage"
      :page-size="size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 8px; float: right"
      layout="sizes,prev,pager,next"
    />

    <!-- 编辑对话框 -->
    <user-dialog :reset-form="resetForm" @clearData="clearData" />
  </div>
</template>

<script>
import UserHeader from "./module/UserHeader";
import UserDialog from "./module/UserDialog";
import { mapState, mapActions } from "vuex";
import _ from 'lodash'
export default {
  name: "User",
  data() {
    return {
      delLoading: false,
      resetForm: {
        id: "",
        username: "",
        realName: "",
        password: "",
        reqPassword: "",
        phone: "",
        email: "",
        role: {
          id: ""
        }
      },
      currentPage: 1,
      size: 10,
      isAuth: false,
      dataSource: [],
      dataList: []
    };
  },

  created() {
    const roleId = localStorage.getItem("roleId");
    if (roleId == "1") this.isAuth = true;
  },

  components: {
    UserHeader,
    UserDialog
  },
  methods: {
    ...mapActions({
      editDialog: "user/editDialog",
      deleteUser: "user/deleteUser",
      resetPassword: "user/resetPassword",
      findAll: "user/findAll"
    }),
    initData() {
      this.dataList = JSON.parse(localStorage.getItem("dataList"));
      const end = this.currentPage * this.size;
      this.dataSource = this.dataList.slice(0, end);
    },
    subDelete(id) {
      this.delLoading = true;
      this.deleteUser(id)
        .then(() => {
          this.delLoading = false;
          this.$refs[id].doClose();
          this.$notify({
            title: "操作成功",
            type: "success",
            duration: 1500
          });
          this.findAll();
        })
        .catch(err => {
          this.delLoading = false;
          this.$refs[id].doClose();
        });
    },
    handleEdit(id) {
      this.editDialog(id).then(data => {
        this.resetForm = data;
      });
    },
    resetPasswordDailog(id) {
      this.$confirm("确定重置该账户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.resetPassword(id).then(() => {
            this.$message({
              type: "success",
              message: "重置成功!"
            });
          });
        })
        .catch(() => {});
    },
    clearData() {
      Object.assign(this.$data, this.$options.data());
    },
    handleCurrentChange(val){
      const start = (val - 1)* this.size
      const end = val * this.size
      this.dataSource = this.dataList.slice(start, end)
    },
    handleSizeChange(val) {
      this.dataSource = this.dataList.slice(0, val)
      console.log(this.dataList, this.dataSource, 'dataSource')
      this.currentPage = 1
    }
  },

  computed: {
    ...mapState({
      loading: state => state.user.loading,
      data: state => state.user.table.data,
      total: state => state.user.table.total
    })
  },
  mounted() {
    //页面初始化完成
    this.findAll()
    this.initData()
  }
};
</script>

<style lang="less" scoped>
.head-container {
  .head-text {
    display: initial;
  }
}
.table-container {
  margin-top: 20px;
}
</style>
